<template>
  <div class="wrap">
    <Swiper btnCustom>
      <SwiperSlide>
        <div class="item">
          <img
            src="https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/4479928.jpg"
            alt=""
          />
        </div>
      </SwiperSlide>
      <SwiperSlide>
        <div class="item">
          <img
            src="https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/4480023.jpg"
            alt=""
          />
        </div>
      </SwiperSlide>
      <SwiperSlide>
        <div class="item">
          <img
            src="https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/4481243.jpg"
            alt=""
          />
        </div>
      </SwiperSlide>
      <SwiperSlide>
        <div class="item">
          <img
            src="https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/4482004.jpg"
            alt=""
          />
        </div>
      </SwiperSlide>
      <SwiperSlide>
        <div class="item">
          <img
            src="https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/4481234.png"
            alt=""
          />
        </div>
      </SwiperSlide>
      <SwiperSlide>
        <div class="item">
          <img
            src="https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/4480023.jpg"
            alt=""
          />
        </div>
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<script>
import Swiper from "../components/Swiper";
import SwiperSlide from "../components/SwiperSlide";

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
};
</script>

<style scoped>
.wrap {
  /* 父容器，设置 轮播图的宽度 */
  width: 1000px;
  margin: 0 auto;
}

.item {
  height: 500px;
  background: skyblue;
  font-size: 50px;
  line-height: 500px;
  text-align: center;
}
</style>
